<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>流程管理 - 表单</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="/lib/layui/css/layui.css" media="all" />
	<script src="/lib/layui/layui.js" charset="utf-8"></script>
	<script src="/lib/jquery/jquery.js"></script>
	<script src="/static/js/main.js"></script>
	<script src="process.js"></script>
	<style type="text/css">
		html,body{
			height:100%;
		}
		iframe{
			border: 0;
			width: 100%;
			height: 100%;
		}
		.height100{
			height:100%;
			box-sizing: border-box;
		}
	</style>
</head>

<body>
	
<div style="padding: 10px; background-color: #F2F2F2;" class="height100">
  <div class="layui-row layui-col-space10 height100">
    <div class="layui-col-md9 height100">
      <div class="layui-card height100">
        <div id="title" class="layui-card-header"></div>
        <div class="layui-card-body " style="height: 80%">
        	<!-- tab start -->
        	<div class="layui-tab layui-tab-brief" style=" width: 100%;height: 100%" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
			 		<li class="layui-this">表单</li>
					<li>流程图</li>
				</ul>
				<div class="layui-tab-content" style=" width: 100%;height: 100%">
					<div class="layui-tab-item layui-show" style="width: 100%;height: 100%">
						<iframe id="iframeForm"></iframe>
					</div>
    				<div class="layui-tab-item" style="width: 100%;height: 100%">
    					<iframe id="iframeTrace"></iframe>
    				</div>
				</div>
			</div>
			<!-- tab end -->
        </div>
      </div>
    </div>
    <div class="layui-col-md3 height100">
      <div class="layui-card height100">
        <div class="layui-card-header ">协同</div>
        <div class="layui-card-body" style="height: 80%">
        	<form hidden="hidden" class="layui-form layui-form-pane" action="">
        		<div class="layui-form-item layui-form-text">
        			<div class="layui-input-block">
        				<input type="radio" name="pass" value="1" title="同意" checked="true">
        				<input type="radio" name="pass" value="0" title="不同意">
        			</div>
        		</div>
          		<div class="layui-form-item layui-form-text">
					<div class="layui-input-block">
						<textarea name="comments" placeholder="请输入内容" required lay-verify="required" class="layui-textarea" ></textarea>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<div class="layui-input-block">
				    	<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
				    	<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
          	</form>
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>处理人意见</legend>
			</fieldset>
			<ul id="opinions" class="layui-timeline"></ul>

        </div>
      </div>
    </div>
  </div>
</div> 





</body>
<script>
    var ysb = {};
    var configureCom = null;
    layui.use(['configureCom','allHeight','element','form'], function () {
    	var element = layui.element;
		// element.on(tab('test'),function(res){

		// });
    	configureCom = layui.configureCom;
    	var from = configureCom.GetQueryString("from");
    	if(from=='done'||from=='sponsor'){
    		$("form").remove();
    	}else{
			$("form").show();
    	}

    	var taskInfo = {
    		"procInstId":configureCom.GetQueryString("procInstId"),
			"taskId":configureCom.GetQueryString("taskId"),
			"poId":configureCom.GetQueryString("poId"),
			"title":decodeURI(configureCom.GetQueryString("title")),
			"name":decodeURI(configureCom.GetQueryString("name"))
    	};

    	initForm(taskInfo);
    	var form = layui.form;
  
		//监听提交
		form.on('submit(formDemo)', function(data){
			console.log(data);
			next({
				"taskId":taskInfo.taskId,
				"poId":taskInfo.poId,
				"variables":[
					{"name":"pass","value":data.field.pass}
				]
			},{
				"pass":data.field.pass,
				"passName":$('input:radio:checked').attr('title'),
				"comments":data.field.comments
			});
			//layer.msg(JSON.stringify(data.field));
			return false;
		});


    });

    /**
     * 初始化表单
     * @param  {[type]} taskInfo [description]
     * @return {[type]}          [description]
     */
    function initForm(taskInfo){

		$("#iframeForm").attr("src","https://www.baidu.com?poId="+taskInfo.poId);
    	if(taskInfo.procInstId){
			$("#iframeTrace").attr("src","/api/act/trace/traceProcessInstance?processInstanceId="+taskInfo.procInstId);
		}
		$("#title").text(taskInfo.title + (taskInfo.name?(" - "+taskInfo.name):""));


    	configureCom.getAjax("/api/act/ctx/form",taskInfo).then(function(res){
			var html = "";
			res.form.opinions.forEach(function(opinion){
				html+='<li class="layui-timeline-item">';
				html+='<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
				html+='<div class="layui-timeline-content layui-text">';
				html+='<p style="text-align: left;">'+ opinion.userName + '&nbsp;&nbsp;&nbsp;'+ opinion.createTime +'</p>';
				html+='<font class="layui-timeline-title">'+ opinion.taskName +'</font>';
				html+='<p>['+opinion.passName+'] '+ opinion.comments +'</p>';
				
				html+='</div>'
				html+='</li>'
			});
			console.log(html);
			$("#opinions").html(html);
        });
    }

</script>
</html>